import styles from '../../../../screens/home/Home.module.css'
import { Link } from "react-router-dom";

function IngredientItem({ ingredient }) {
  return (
    <div key={ingredient.id} className={styles.item}>
      <div
        className={styles.image}
        style={{
          // backgroundImage: `url(${ingredient.image})`,
          backgroundImage: 'url(/common_potion_img.webp)'
        }}
      />
      <div className={styles.info}>
        <h2>{ingredient.name}</h2>
        <Link className='btn' to={`/Ingredients/${ingredient.id}`}>
          Read more
        </Link>
      </div>
    </div>
  );
}

export default IngredientItem;